<template>
    <div>
      <div class="center-view">
        <router-link to="/login">
          <div class="orange">
            <img src="../../public/login.png" alt="" class="loginImg" />
            <div>立即登录</div>
          </div></router-link
        >

        <ul class="logintab">
          <li>
            <router-link to="/login" active-class="kerwinactive" class="icon">
              <span class="spantop">0张</span>
              <span class="spanbot">卖座券</span>
            </router-link>
          </li>

          <li>
            <router-link to="/login" active-class="kerwinactive" class="icon">
              <span class="spantop">￥0</span>
              <span class="spanbot">余额</span>
            </router-link>
          </li>
        </ul>

        <div class="margin-set">
          <i class="iconfont icon-yingyuan"></i>
          <span class="span1">电影订单</span>
        </div>

        <div class="margin-set">
          <i class="iconfont icon-hongbao"></i>
          <span class="span1">组合红包</span>
        </div>
        <div class="margin-set">
          <i class="iconfont icon-wode"></i>
          <span class="span1">帮助与客服</span>
        </div>
        <div class="margin-set">
          <i class="iconfont icon-shezhi"></i>
          <span class="span1">设置</span>
        </div>
      </div>
    </div>
  </template>
  <style lang="scss" scoped>
  .center-view {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    font-size: 15px;
    background: #f4f4f4;
    margin-bottom: 59px;
    .orange {
      background: orange;
      width: 100%;
      height: 9.375rem;
      display: flex;
      align-items: center;
      justify-content: start;
    }
    .loginImg {
      width: 3.9375rem;
      height: 3.9375rem;
      border-radius: 2.1875rem;
      margin-right: 1.25rem;
      border: 2px solid #fff;
      margin-left: 25px;
    }
    ul {
      display: flex;
      list-style: none;
      height: 3.125rem;
      li {
        flex: 1;
        height: 1.5625rem;
        line-height: 1.5625rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        .icon {
          display: flex;
          flex-direction: column;
          .spantop {
            color: #191a1b;
            font-size: 17px;
          }
          .spanbot {
            font-size: 13px;
            color: #797d82;
          }
        }
      }
    }
    .margin-set {
      background: #fff;
      padding: 0 15px;
      height: 49px;
      align-items: center;
      line-height: 49px;
      .span1 {
        font-size: 25px;
      }
      .icon-yingyuan {
        color: orange;
        font-size: 1.5625rem;
        margin: 0 0.625rem;
      }

      .icon-hongbao {
        color: red;
        font-size: 1.5625rem;
        margin: 0 0.625rem;
      }

      .icon-wode {
        color: skyblue;
        font-size: 1.5625rem;
        margin: 0 0.625rem;
      }

      .icon-shezhi {
        color: greenyellow;
        font-size: 1.5625rem;
        margin: 0 0.625rem;
      }
    }
  }
  </style>
